<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="searchDate"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="onDateChange()"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div id="skuChart" ref="spiderStat" style="height:400px;">趋势曲线图</div>
  </div>

</template>
<script>
  export default {
    name: 'soldsChart',
    props:["chartData","searchDate"],
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    mounted() {
      this.drawChart()
    },
    methods: {
      onDateChange(){
        this.$emit('onDateChange', this.searchDate)
      },
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("skuChart"));
        myChart.setOption({
          title: {
            text: '趋势图'
          },
          legend: {
             data: ["销量","价格"]
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#65cea7'
              }
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.chartData.timeSeries
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '销量',
              type: 'line',
              data: this.chartData.soldSeries
            },
            {
              name: '价格',
              type: 'line',
              data: this.chartData.priceSeries
            }
          ]
        });
      },
    },
  }
</script>
